<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Title</title>
    <link rel="stylesheet" href="lib/dragula-3.7.2/dist/dragula.css">
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="css/gallery.css">
</head>
<body>
<div class="gallery">
    <ul class="images">
        <li class="images-item">
            <img src="" class="images-img">

            <span class="actions">
                <span class="preview box">
                   <i class="fa fa-search-plus" aria-hidden="true"></i>
                </span>
                <span class="delete box">
                    <i class="fa fa-trash" aria-hidden="true"></i>
                </span>
            </span>
        </li>
    </ul>

    <div class="upload" id="upload">
        <i class="fa fa-upload fa-2x" aria-hidden="true"></i>
    </div>

    <ul class="test">
        123123
    </ul>
</div>

<script src="lib/jquery-3.5.1.js"></script>
<script src="lib/dragula-3.7.2/dist/dragula.js"></script>
<script src="lib/layui/layui.js"></script>
<script src="js/preview.js"></script>
<script>
    var images = [
        'https://cos.sxkid.com/images/topiccircle//topicImage/a78cc8a5-32aa-402d-a6ea-182ade18ed46.jpg',
        '1',
        '2',
        '3',
        'https://cdn.sxkid.com/images/user/97d3ae31-0427-45d8-8da1-000111c45c75/c93090a8-6620-434d-a712-5622e9f41d6d.jpg'
    ];

    var actions = `<span class="actions"><span class="preview actions-item"><i class="fa fa-search-plus" aria-hidden="true"></i></span><span class="delete actions-item"><i class="fa fa-trash" aria-hidden="true"></i></span></span>`;
    var $imageItem = $(`<li class="images-item"><img class="images-img" >${actions}</li>`);
    var $wrapper = $('.gallery');

    init();
    dragula([$('.images').get(0)]);

    preview.init();
    $('.gallery').on('click', '.preview', function () {
        let $this = $(this),
            $item = $this.parents('li.images-item');
        let url= $item.data('url');

        preview.show(url)
    })
   // $('.gallery .preview').eq(0).trigger('click');

    function init() {
        let $images = $wrapper.find('.images');
        $images.empty();

        images.map(image => {
            let $item = $imageItem.clone();
            $item.data('url', image);
            $item.find('.images-img').attr('src', image).attr('alt', image);
            $images.append($item)
        });
    }
</script>
</body>
</html>